* {
    padding: 0;
    margin: 0;
}

.line_ONE {
    width: 14em;
    margin: 0 auto;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    /* transform: translateY(-50%); */
}


/* Animation */

.anim-typewriter {
    animation: typewriter 4s steps(44) 1s 1 normal both, blinkTextCursor 500ms steps(44) infinite normal;
}

@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 24em;
    }
}

@keyframes blinkTextCursor {
    from {
        border-right-color: rgba(255, 255, 255, .75);
    }
    to {
        border-right-color: transparent;
    }
}

.nav {
    background-color: #dea025;
    width: 1260px;
    height: 70px;
}

.container {
    position: relative;
    top: 0px;
}

.link-1 {
    transition: 0.3s ease;
    background: #dea025;
    color: #ffffff;
    font-size: 20px;
    text-decoration: none;
    border-top: 4px solid #dea025;
    border-bottom: 4px solid #dea025;
    /*padding: 20px 0;*/
    padding-top: 15px;
    margin: 2px 105px;
    display: inline-block;
}

.link-1:hover {
    border-top: 4px solid #ffffff;
    border-bottom: 5px solid #ffffff;
    padding: 6px 0;
}

.first {
    background-color: #1e2655;
    width: 1260px;
    height: 560px;
    position: absolute;
}

.live {
    width: 105px;
    height: 45px;
    background-color: #ca2625;
    position: absolute;
    top: 20px;
    left: 50px;
    border-radius: 14px;
    text-align: center;
    font-size: 30px;
    color: #dea025;
    font-weight: 900;
    letter-spacing: 3px;
    font-family: 'New Century Schoolbook', 'New York', Times, Georgia, serif, TimesNR, ;
}

.live:hover {
    color: #bb2b2a;
    background: #f0a207;
    box-shadow: 0 6px 0 0 rgba(0, 0, 0, .2);
    border: 3px solid#eed198;
}


/*.live :hover {
    color: #ca2625;
}*/

.one {
    background-color: #dea025;
    width: 1100px;
    height: 400px;
    position: absolute;
    top: 60px;
    left: 85px;
    box-shadow: 0px 0px 20px black inset;
}

.topic {
    height: 200px;
    width: 800px;
    margin-top: 80px;
    margin-left: 50px;
    font-size: 40px;
    color: white;
}

.topic:hover {
    -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%);
    -webkit-mask-size: 200%;
    animation: shine 2s infinite;
}

@-webkit-keyframes shine {
    from {
        -webkit-mask-position: 150%;
    }
    to {
        -webkit-mask-position: -50%;
    }
}

.henga {
    position: absolute;
    top: 250px;
    color: white;
}

.shua {
    position: absolute;
    top: 250px;
    left: 220px
}

.hengb {
    position: absolute;
    top: 293px;
    left: 220px;
}

.shub {
    position: absolute;
    top: 294px;
    left: 440px
}

.hengc {
    position: absolute;
    top: 337px;
    left: 440px;
}

.shuc {
    position: absolute;
    top: 338px;
    left: 660px;
}

.xiangkuangren {
    position: absolute;
    height: 510px;
    width: 365px;
    top: -110px;
    left: 720px;
    background-image: url(6.png);
}

.do {
    height: 70px;
    width: 200px;
    background-color: #dea025;
    position: absolute;
    top: 225px;
    left: 235px;
    color: white;
    text-align: left;
}

.re {
    height: 70px;
    width: 200px;
    background-color: #dea025;
    position: absolute;
    top: 273px;
    left: 460px;
    color: white;
    text-align: left;
}


/*.re {
    height: 45px;
    width: 130px;
    background-color: #d8cfbd;
    position: absolute;
    top: 320px;
    left: 50px
}*/

.a {
    background-color: #1e2655;
    width: 100px;
    height: 50px;
    position: absolute;
    top: 420px;
    left: 500px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px black;
    transition: 0.3s ease;
    color: #ffffff;
    font-size: 20px;
    text-decoration: none;
    border: 3px solid #2d355f;
}

.a:hover {
    border-top: 420px solid #4a5175;
    border-bottom: 2030px solid #ffffff;
    padding: 0px 3px;
    margin-bottom: 3px;
}

.second {
    background-color: #1e2655;
    width: 1260px;
    height: 960px;
    position: absolute;
    top: 630px;
    z-index: 1;
}

.two {
    background-color: #dea025;
    width: 1100px;
    height: 350px;
    position: absolute;
    top: 550px;
    left: 73px;
    box-shadow: 0px 0px 20px black;
    z-index: 3;
}

.flip-card-container {
    /*background-color: rgb(104, 113, 136);*/
    width: 675px;
    height: 450px;
    position: absolute;
    top: 260px;
    left: 290px;
    /* box-shadow: 6px 6px 15px rgb(0, 0, 0);
    background-image: url(2.jpg);
    background-repeat: no-repeat;*/
    z-index: 4;
    perspective: 1000px;
}


/*.flip-card-container {
    width: 675px;
    height: 450px;
    perspective: 1000px;
}*/

.flip-card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    box-shadow: 6px 6px 15px rgb(0, 0, 0);
}

.flip-card-container:hover .flip-card {
    transform: rotateY(180deg);
    /* <=>  rotateY(.5turn) */
}


/* Position the front and back side */

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border-radius: 0.5rem; */
}

.flip-card-front {
    background-color: #333;
    color: #fff;
}

.flip-card-back {
    background-color: #2c335f;
    color: #fff;
    transform: rotateY(180deg);
}

.flip-card-front img {
    width: 100%;
    height: 100%;
    /* border-radius: 0.5rem; */
}

.flip-card-back p {
    text-align: center;
    margin: 1rem;
    font-size: 1.4rem;
    line-height: 1.5rem;
}

.flip-card-back p span {
    display: block;
    font-size: 1rem;
    font-style: italic;
    font-weight: bold;
    margin-top: 1.25rem;
}

.mi {
    width: 1100px;
    height: 600px;
    position: absolute;
    top: 0px;
    left: 70px;
    z-index: 2;
    color: white;
    font-size: 50px;
    word-spacing: 1px;
    line-height: 50px;
}

.fa {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 500px;
    left: 130px;
    font-size: 350px;
    z-index: 5;
    color: #bb2b2a;
}

.sol {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 680px;
    left: 980px;
    font-size: 350px;
    z-index: 5;
    color: #bb2b2a;
}

.la {
    position: absolute;
    width: 320px;
    height: 100px;
    top: 740px;
    left: 300px;
    z-index: 6;
    font-size: 40px;
    color: #bb2b2a;
    font-weight: 900;
    border-radius: 20px;
}

.la:hover {
    color: #bb2b2a;
    background: #f0a207;
    box-shadow: 0 6px 0 0 rgba(0, 0, 0, .2);
    border: 3px solid#eed198;
}

.xi {
    position: absolute;
    width: 320px;
    height: 140px;
    top: 740px;
    left: 640px;
    z-index: 6;
    font-size: 17px;
    color: #bb2b2a;
    font-weight: 900;
}


/*
.ziwojieshao {
    color: #111738;
    text-align: left;
    margin-left: 10px;
    margin-top: 30px;
    letter-spacing: 1px;
    line-height: 25px;
}
*/

.third {
    background-color: #1e2655;
    width: 1260px;
    height: 710px;
    position: absolute;
    top: 1590px;
    box-shadow: 0px 0px 20px black;
}

.c {
    background-color: #dea025;
    width: 1060px;
    height: 520px;
    position: absolute;
    ;
    top: 55px;
    left: 140px;
    box-shadow: 0px 0px 20px black;
}

.d {
    background-color: #dea025;
    width: 1060px;
    height: 520px;
    position: absolute;
    top: 80px;
    left: 120px;
    box-shadow: 0px 0px 20px black;
}

.e {
    background-color: #dea025;
    width: 1060px;
    height: 520px;
    position: absolute;
    top: 105px;
    left: 100px;
    box-shadow: 0px 0px 20px black;
}

.f {
    background-color: #dea025;
    width: 1060px;
    height: 520px;
    position: absolute;
    top: 130px;
    left: 80px;
    box-shadow: 0px 0px 20px black;
}

.thirda {
    position: absolute;
    top: 180px;
    left: 290px;
    z-index: 6;
}

.thirdb {
    position: absolute;
    top: 308px;
    left: 186px;
    z-index: 8;
}

.thirdc {
    position: absolute;
    top: 310px;
    left: 187px;
    z-index: 3;
}

.thirdd {
    position: absolute;
    top: 180px;
    left: 290px;
    z-index: 4;
}

.thirde {
    position: absolute;
    top: 162px;
    left: 239px;
    transform: rotate(39deg);
    z-index: 5;
}

.thirdf {
    position: absolute;
    top: 162px;
    left: 553px;
    transform: rotate(39deg);
    z-index: 1;
}

.pingxing {
    position: absolute;
    background-color: white;
    width: 300px;
    height: 130px;
    transform: skew(-39deg);
    -webkit-transform: skew(-39deg);
    -moz-transform: skew(-39deg);
    -o-transform: skew(-39deg);
    -ms-transform: skew(-39deg);
    margin: 50px auto;
    top: 469px;
    left: 239px;
    z-index: 1;
    box-shadow: 9px 8px 16px black;
}

.zhaopian {
    position: absolute;
    width: 156px;
    height: 410px;
    top: 200px;
    left: 286px;
    background: url("1.png") no-repeat left top!important;
    z-index: 6;
}

.zhaopiana {
    position: absolute;
    width: 102px;
    height: 170px;
    top: 400px;
    left: 490px;
    background: url("3.png") no-repeat left top!important;
    z-index: 9;
}

.zhaopianb {
    position: absolute;
    width: 102px;
    height: 170px;
    top: 400px;
    left: 360px;
    background: url("3.png") no-repeat left top!important;
    z-index: 4;
}

.zhaopianc {
    position: absolute;
    width: 114px;
    height: 190px;
    top: 489px;
    left: 174px;
    background: url("4.png") no-repeat left top!important;
    z-index: 4;
}

.herdream {
    position: absolute;
    width: 320px;
    height: 70px;
    top: 127px;
    left: 290px;
    font-size: 50px;
    text-align: center;
    color: white;
    font-weight: 900;
}

.xuxiana {
    position: absolute;
    top: 160px;
    left: 920px;
}

.xuxianb {
    position: absolute;
    top: 190px;
    left: 1010px;
}

.xuxianc {
    position: absolute;
    top: 220px;
    left: 1048px;
}

.xuxiand {
    position: absolute;
    top: 250px;
    left: 1010px;
}

.xuxiane {
    position: absolute;
    top: 280px;
    left: 958px;
}

.xuxianf {
    position: absolute;
    top: 310px;
    left: 1086px;
}

.xuxiang {
    position: absolute;
    top: 340px;
    left: 1036px;
}

.xuxianh {
    position: absolute;
    top: 370px;
    left: 1061px;
}

.xuxiani {
    position: absolute;
    top: 400px;
    left: 845px;
}

.xuxianj {
    position: absolute;
    top: 430px;
    left: 960px;
}

.xuxiank {
    position: absolute;
    top: 460px;
    left: 1011px;
}

.xuxianl {
    position: absolute;
    top: 490px;
    left: 923px;
}

.xuxianm {
    position: absolute;
    top: 520px;
    left: 895px;
}

.xuxiann {
    position: absolute;
    top: 550px;
    left: 948px;
}

.xuxiano {
    position: absolute;
    top: 580px;
    left: 999px;
}

.xuxianp {
    position: absolute;
    top: 610px;
    left: 974px;
}

.dreama {
    position: absolute;
    width: 230px;
    height: 70px;
    top: 150px;
    left: 682px;
    color: white;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);
.buttona {
    position: absolute;
    /*margin-top: 10%;*/
    background: #dea025;
    border: 1px solid white;
    /*padding: 20px;*/
    /*font-size: 0.9em;*/
    color: white;
    box-shadow: 4px 4px 0px 0px white;
    font-family: 'Open Sans', sans-serif;
    /*font-weight: 700;*/
    /*letter-spacing: 5px;*/
    /*text-transform: uppercase;*/
    transition: all 300ms ease-in-out;
    left: 0;
    top: 0;
}

.buttona:hover {
    left: 4px;
    top: 4px;
    box-shadow: 0 0 0 0 white;
}

.dreamb {
    position: absolute;
    width: 230px;
    height: 70px;
    top: 250px;
    left: 720px;
    color: white;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);
.buttonb {
    position: absolute;
    /*margin-top: 10%;*/
    background: #dea025;
    border: 1px solid white;
    /*padding: 20px;*/
    /*font-size: 0.9em;*/
    color: white;
    box-shadow: 4px 4px 0px 0px white;
    font-family: 'Open Sans', sans-serif;
    /*font-weight: 700;*/
    /*letter-spacing: 5px;*/
    /*text-transform: uppercase;*/
    transition: all 300ms ease-in-out;
    left: 0;
    top: 0;
}

.buttonb:hover {
    left: 4px;
    top: 4px;
    box-shadow: 0 0 0 0 white;
}

.dreamc {
    position: absolute;
    width: 230px;
    height: 70px;
    top: 370px;
    left: 630px;
    color: white;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);
.buttonc {
    position: absolute;
    /*margin-top: 10%;*/
    background: #dea025;
    border: 1px solid white;
    /*padding: 20px;*/
    /*font-size: 0.9em;*/
    color: white;
    box-shadow: 4px 4px 0px 0px white;
    font-family: 'Open Sans', sans-serif;
    /*font-weight: 700;*/
    /*letter-spacing: 5px;*/
    /*text-transform: uppercase;*/
    transition: all 300ms ease-in-out;
    left: 0;
    top: 0;
}

.buttonc:hover {
    left: 4px;
    top: 4px;
    box-shadow: 0 0 0 0 white;
}

.dreamd {
    position: absolute;
    width: 230px;
    height: 70px;
    top: 490px;
    left: 660px;
    color: white;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);
.buttond {
    position: absolute;
    /*margin-top: 10%;*/
    background: #dea025;
    border: 1px solid white;
    /*padding: 20px;*/
    /*font-size: 0.9em;*/
    color: white;
    box-shadow: 4px 4px 0px 0px white;
    font-family: 'Open Sans', sans-serif;
    /*font-weight: 700;*/
    /*letter-spacing: 5px;*/
    /*text-transform: uppercase;*/
    transition: all 300ms ease-in-out;
    left: 0;
    top: 0;
}

.buttond:hover {
    left: 4px;
    top: 4px;
    box-shadow: 0 0 0 0 white;
}

.forth {
    background-color: #dea025;
    width: 1260px;
    height: 930px;
    position: absolute;
    top: 2300px;
    box-shadow: 0px 0px 15px black;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

*:before,
*:after {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

#wrapperss {
    position: absolute;
    margin-bottom: 10px;
    height: 300px;
    margin-right: 900px;
    left: 100px;
    top: 600px
}

#spidercat {
    -webkit-animation: swinganimation 3.5s infinite alternate;
    -moz-animation: swinganimation 3.5s infinite alternate;
    -ms-animation: swinganimation 3.5s infinite alternate;
    -o-animation: swinganimation 3.5s infinite alternate;
    animation: swinganimation 3.5s infinite alternate;
    position: absolute;
    width: 70px;
    height: 103px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

#spidercat:before {
    content: " ";
    position: absolute;
    width: 0;
    height: 1000px;
    left: 50%;
    bottom: 100%;
    margin-bottom: -18px;
    margin-left: -1px;
    border: solid;
    border-width: 1px;
    border-color: white;
    z-index: 10;
}

#spidercat .head {
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -ms-border-radius: 5px 5px 0 0;
    -o-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    position: absolute;
    width: 28px;
    height: 28px;
    bottom: 5px;
    left: 50%;
    margin-left: -14px;
    background: #ff6d36;
    border: solid 1px #1b405f;
    /* Neck */
}

#spidercat .head:before {
    content: " ";
    position: absolute;
    height: 4px;
    width: 8px;
    top: -6px;
    left: 50%;
    margin-left: -5px;
    background: #ff6d36;
    border: solid 1px #1b405f;
}

#spidercat .head .ear-left,
#spidercat .head .ear-right {
    position: absolute;
    width: 0;
    height: 0;
    top: 100%;
    border-style: solid;
    border-color: #1b405f transparent transparent transparent;
}

#spidercat .head .ear-left:before,
#spidercat .head .ear-right:before {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    top: -6px;
    border-style: solid;
    border-color: #ff6d36 transparent transparent transparent;
}

#spidercat .head .ear-left {
    left: -1px;
    border-width: 6px 8px 0 0;
}

#spidercat .head .ear-left:before {
    left: 1px;
    border-width: 5px 5px 0 0;
}

#spidercat .head .ear-right {
    right: -1px;
    border-width: 6px 0 0 8px;
}

#spidercat .head .ear-right:before {
    right: 1px;
    border-width: 5px 0 0 5px;
}

#spidercat .head .eye-left,
#spidercat .head .eye-right {
    -webkit-animation: eyesanimation 1s infinite alternate;
    -moz-animation: eyesanimation 1s infinite alternate;
    -ms-animation: eyesanimation 1s infinite alternate;
    -o-animation: eyesanimation 1s infinite alternate;
    animation: eyesanimation 1s infinite alternate;
    -moz-border-radius-topleft: 50%;
    -webkit-border-top-left-radius: 50%;
    border-top-left-radius: 50%;
    -moz-border-radius-topright: 50%;
    -webkit-border-top-right-radius: 50%;
    border-top-right-radius: 50%;
    position: absolute;
    width: 9px;
    height: 2px;
    bottom: 9px;
    background: white;
    border: solid 1px #1b405f;
}

#spidercat .head .eye-left {
    left: 3px;
}

#spidercat .head .eye-right {
    right: 3px;
}

#spidercat .body {
    position: absolute;
    width: 32px;
    height: 34px;
    top: 34px;
    left: 50%;
    margin-left: -16px;
    background: #336687;
    border: solid 1px #1b405f;
    z-index: 2;
}

#spidercat .body:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 4px;
    right: 4px;
    bottom: 0;
    background: #ff6d36;
}

#spidercat .body:after {
    content: " ";
    position: absolute;
    width: 36px;
    height: 6px;
    top: -7px;
    left: 50%;
    margin-left: -19px;
    background: #ff6d36;
    border: solid 1px #1b405f;
    z-index: 0;
}

#spidercat .body .spider {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    width: 4px;
    height: 10px;
    left: 50%;
    bottom: 5px;
    margin-left: -2px;
    background: #1b405f;
}

#spidercat .body .spider:before,
#spidercat .body .spider:after {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    content: " ";
    position: absolute;
    width: 10px;
    height: 12px;
    left: 50%;
    margin-left: -6px;
    border-style: double;
    border-width: 1px;
}

#spidercat .body .spider:before {
    top: 50%;
    border-color: #1b405f transparent transparent transparent;
}

#spidercat .body .spider:after {
    bottom: 50%;
    border-color: transparent transparent #1b405f transparent;
}

#spidercat .body .arm-left,
#spidercat .body .arm-right {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-transform-origin: bottom center 0 50%;
    -moz-transform-origin: bottom center 0 50%;
    -ms-transform-origin: bottom center 0 50%;
    -o-transform-origin: bottom center 0 50%;
    transform-origin: bottom center 0 50%;
    position: absolute;
    width: 12px;
    height: 54px;
    bottom: -2px;
    background: #336687;
    border: solid 1px #1b405f;
    z-index: 1;
}

#spidercat .body .arm-left:before,
#spidercat .body .arm-right:before {
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    -ms-border-radius: 6px 6px 0 0;
    -o-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    content: " ";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: 50%;
    background: #ff6d36;
    border: solid 1px #1b405f;
}

#spidercat .body .arm-left {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
    left: -9px;
    z-index: 2;
}

#spidercat .body .arm-right {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
    right: -9px;
}

#spidercat .legs {
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    -ms-border-radius: 35px;
    -o-border-radius: 35px;
    border-radius: 35px;
    position: absolute;
    width: 70px;
    height: 28px;
    top: 6px;
    left: 50%;
    margin-left: -35px;
    background: transparent;
    border: solid 10px #1b405f;
    z-index: 0;
}

#spidercat .legs:before {
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    -ms-border-radius: 35px;
    -o-border-radius: 35px;
    border-radius: 35px;
    content: " ";
    position: absolute;
    width: 52px;
    height: 10px;
    top: -9px;
    left: 50%;
    margin-left: -34px;
    background: transparent;
    border: solid 8px #336687;
    z-index: 0;
}

#spidercat .legs .boot-left,
#spidercat .legs .boot-right {
    position: absolute;
    width: 19px;
    height: 12px;
    top: -11px;
    background: #ff6d36;
    border: solid 1px #1b405f;
}

#spidercat .legs .boot-left:before,
#spidercat .legs .boot-left:after,
#spidercat .legs .boot-right:before,
#spidercat .legs .boot-right:after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

#spidercat .legs .boot-left {
    right: 50%;
    margin-right: 1px;
}

#spidercat .legs .boot-left:before {
    top: -7px;
    right: -1px;
    border-color: transparent transparent #1b405f transparent;
    border-width: 0 0 7px 7px;
}

#spidercat .legs .boot-left:after {
    top: -5px;
    right: 0;
    border-color: transparent transparent #ff6d36 transparent;
    border-width: 0 0 5px 5px;
}

#spidercat .legs .boot-right {
    left: 50%;
    margin-left: 1px;
}

#spidercat .legs .boot-right:before {
    top: -7px;
    left: -1px;
    border-color: transparent transparent #1b405f transparent;
    border-width: 0 7px 7px 0;
}

#spidercat .legs .boot-right:after {
    top: -5px;
    left: 0;
    border-color: transparent transparent #ff6d36 transparent;
    border-width: 0 5px 5px 0;
}

@-webkit-keyframes eyesanimation {
    0% {
        height: 2px;
    }
    100% {
        height: 5px;
    }
}

@-moz-keyframes eyesanimation {
    0% {
        height: 2px;
    }
    100% {
        height: 5px;
    }
}

@-ms-keyframes eyesanimation {
    0% {
        height: 2px;
    }
    100% {
        height: 5px;
    }
}

@keyframes eyesanimation {
    0% {
        height: 2px;
    }
    100% {
        height: 5px;
    }
}

@-webkit-keyframes swinganimation {
    0% {
        -webkit-transform: translateY(-100px);
        -moz-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        -o-transform: translateY(-100px);
        transform: translateY(-100px);
    }
    100% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@-moz-keyframes swinganimation {
    0% {
        -webkit-transform: translateY(-100px);
        -moz-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        -o-transform: translateY(-100px);
        transform: translateY(-100px);
    }
    100% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@-ms-keyframes swinganimation {
    0% {
        -webkit-transform: translateY(-100px);
        -moz-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        -o-transform: translateY(-100px);
        transform: translateY(-100px);
    }
    100% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes swinganimation {
    0% {
        -webkit-transform: translateY(-100px);
        -moz-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        -o-transform: translateY(-100px);
        transform: translateY(-100px);
    }
    100% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
}


/*/////*/

a {
    color: white
}

.photo {
    position: absolute;
    top: 280px;
    left: 36%;
    transform: translate(-50%, -50%);
    display: block;
}

.photo img {
    width: 250px;
    height: 320px;
    object-fit: cover;
    /*filter: grayscale(100%) contrast(120%);*/
    box-shadow: 10px 15px 25px 0 rgba(0, 0, 0, .2);
    display: block;
    transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
    margin-top: -10px;
}

.photo:hover img {
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .1);
}

.photo .glow-wrap {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin-top: -10px;
}

.photo .glow {
    display: block;
    position: absolute;
    width: 40%;
    height: 200%;
    background: rgba(255, 255, 255, .2);
    top: 0;
    filter: blur(5px);
    transform: rotate(45deg) translate(-450%, 0);
    transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photo:hover .glow {
    transform: rotate(45deg) translate(450%, 0);
    transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photo:hover img,
.photo:hover .glow-wrap {
    margin-top: 0;
}

h1 {
    position: absolute;
    z-index: 1;
    transform: translate(-25%, -65%);
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    line-height: 1.2;
}


/* Ends */

#author {
    font-family: Helvetica, Arial;
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    color: #888;
}

#author:hover {
    color: #111;
}

.photoa {
    position: absolute;
    top: 280px;
    left: 65%;
    transform: translate(-50%, -50%);
    display: block;
}

.photoa img {
    width: 250px;
    height: 320px;
    object-fit: cover;
    /*filter: grayscale(100%) contrast(120%);*/
    box-shadow: 10px 15px 25px 0 rgba(0, 0, 0, .2);
    display: block;
    transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
    margin-top: -10px;
}

.photoa:hover img {
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .1);
}

.photoa .glow-wrap {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin-top: -10px;
}

.photoa .glow {
    display: block;
    position: absolute;
    width: 40%;
    height: 200%;
    background: rgba(255, 255, 255, .2);
    top: 0;
    filter: blur(5px);
    transform: rotate(45deg) translate(-450%, 0);
    transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photoa:hover .glow {
    transform: rotate(45deg) translate(450%, 0);
    transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photoa:hover img,
.photoa:hover .glow-wrap {
    margin-top: 0;
}

.photob {
    position: absolute;
    top: 690px;
    left: 65%;
    transform: translate(-50%, -50%);
    display: block;
}

.photob img {
    width: 250px;
    height: 320px;
    object-fit: cover;
    /*filter: grayscale(100%) contrast(120%);*/
    box-shadow: 10px 15px 25px 0 rgba(0, 0, 0, .2);
    display: block;
    transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
    margin-top: -10px;
}

.photob:hover img {
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .1);
}

.photob .glow-wrap {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin-top: -10px;
}

.photob .glow {
    display: block;
    position: absolute;
    width: 40%;
    height: 200%;
    background: rgba(255, 255, 255, .2);
    top: 0;
    filter: blur(5px);
    transform: rotate(45deg) translate(-450%, 0);
    transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photob:hover .glow {
    transform: rotate(45deg) translate(450%, 0);
    transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photob:hover img,
.photob:hover .glow-wrap {
    margin-top: 0;
}

.photoc {
    position: absolute;
    top: 690px;
    left: 36%;
    transform: translate(-50%, -50%);
    display: block;
}

.photoc img {
    width: 250px;
    height: 320px;
    object-fit: cover;
    /*filter: grayscale(100%) contrast(120%);*/
    box-shadow: 10px 15px 25px 0 rgba(0, 0, 0, .2);
    display: block;
    transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
    margin-top: -10px;
}

.photoc:hover img {
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .1);
}

.photoc .glow-wrap {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin-top: -10px;
}

.photoc .glow {
    display: block;
    position: absolute;
    width: 40%;
    height: 200%;
    background: rgba(255, 255, 255, .2);
    top: 0;
    filter: blur(5px);
    transform: rotate(45deg) translate(-450%, 0);
    transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photoc:hover .glow {
    transform: rotate(45deg) translate(450%, 0);
    transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photoc:hover img,
.photoc:hover .glow-wrap {
    margin-top: 0;
}

.fieth {
    position: absolute;
    width: 1260px;
    height: 750px;
    background-color: #dea025;
    top: 930px;
    left: 0px;
}

[type=radio] {
    display: none;
}

#slider {
    /*height: 55vw;*/
    position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;
}

#slider label {
    margin: auto;
    width: 546px;
    height: 386px;
    border-radius: 4px;
    position: absolute;
    left: 0;
    right: 0;
    cursor: pointer;
    transition: transform 0.4s ease;
}

#s1:checked~#slide4,
#s2:checked~#slide5,
#s3:checked~#slide1,
#s4:checked~#slide2,
#s5:checked~#slide3 {
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
    transform: translate3d(-30%, 0, -200px);
}

#s1:checked~#slide5,
#s2:checked~#slide1,
#s3:checked~#slide2,
#s4:checked~#slide3,
#s5:checked~#slide4 {
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
    transform: translate3d(-15%, 0, -100px);
}

#s1:checked~#slide1,
#s2:checked~#slide2,
#s3:checked~#slide3,
#s4:checked~#slide4,
#s5:checked~#slide5 {
    box-shadow: 0 13px 25px 0 rgba(0, 0, 0, .3), 0 11px 7px 0 rgba(0, 0, 0, .19);
    transform: translate3d(0, 0, 0);
}

#s1:checked~#slide2,
#s2:checked~#slide3,
#s3:checked~#slide4,
#s4:checked~#slide5,
#s5:checked~#slide1 {
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
    transform: translate3d(15%, 0, -100px);
}

#s1:checked~#slide3,
#s2:checked~#slide4,
#s3:checked~#slide5,
#s4:checked~#slide1,
#s5:checked~#slide2 {
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
    transform: translate3d(30%, 0, -200px);
}

#slide1 {
    background-image: url(11.jpg);
}

#slide2 {
    background-image: url(12.jpg);
}

#slide3 {
    background-image: url(13.jpg);
}

#slide4 {
    background-image: url(14.jpg);
}

#slide5 {
    background-image: url(18.jpg);
}

.windmill {
    width: 100px;
    height: 100px;
    position: absolute;
    /* margin: 100px auto;*/
    left: 595px;
    top: 470px;
}

.stick {
    width: 6px;
    height: 200px;
    position: absolute;
    background: #a86;
    top: 50px;
    left: 47px;
    box-shadow: 0px 0px 9px rgb(94, 92, 92);
}

.stick:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 10px;
    top: 195px;
    left: -22px;
    background: #ddd;
    border-radius: 50%;
    z-index: -1;
}

.wind {
    width: 100px;
    height: 100px;
    position: absolute;
    animation: rotates 2s infinite linear;
    -moz-animation: rotates 2s infinite linear;
    -webkit-animation: rotates 2s infinite linear;
    -o-animation: rotates 2s infinite linear;
}

.wind:after {
    content: "";
    position: absolute;
    top: 45px;
    left: 45px;
    width: 10px;
    height: 10px;
    background: #eee;
    border-radius: 50%;
}

.wind1,
.wind2,
.wind3,
.wind4 {
    width: 90px;
    height: 40px;
    position: absolute;
    margin: 13px 0 0 -41px;
    background: #cef;
    border-bottom-left-radius: 40% 100%;
}

.wind1:after,
.wind2:after,
.wind3:after,
.wind4:after {
    content: "";
    position: absolute;
    right: 0px;
    width: 65px;
    height: 40px;
}

.wind1 {
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    background: #f39c12;
}

.wind1:after {
    background-image: radial-gradient(circle at 0px 0px, rgba(241, 196, 15, 0) 40px, #f1c40f 41px);
}

.wind2 {
    left: 63px;
    top: -28px;
    transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    background: #e74c3c;
}

.wind2:after {
    background-image: radial-gradient(circle at 0px 0px, rgba(255, 4, 4, 0) 40px, #d33 41px);
}

.wind3 {
    left: 92px;
    top: 35px;
    transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    background: #27ae60;
}

.wind3:after {
    background-image: radial-gradient(circle at 0px 0px, rgba(241, 196, 15, 0) 40px, #2ecc71 41px);
}

.wind4 {
    left: 29px;
    top: 63px;
    transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    -o-transform: rotate(315deg);
    background: #2980b9;
}

.wind4:after {
    background-image: radial-gradient(circle at 0px 0px, rgba(52, 152, 219, 0) 40px, #3498db 41px);
}

@keyframes rotates {
    form {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

@-moz-keyframes rotates {
    form {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(-360deg);
    }
}

@-webkit-keyframes rotates {
    form {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-360deg);
    }
}

@-o-keyframes rotates {
    form {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(-360deg);
    }
}

.sixth {
    position: absolute;
    top: 1680px;
    height: 300px;
    width: 1260px;
    background-color: #dea025;
}

.sixth h1 {
    position: absolute;
    top: 20px;
    left: 490px;
    color: white;
}

.sixth h6 {
    position: absolute;
    top: 50px;
    left: 520px;
    color: white;
}

.sixth h1:after,
.sixth h1:before {
    content: '';
    position: absolute;
    left: 0;
    display: inline-block;
    height: 2em;
    width: 100%;
    margin-top: 10px;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

.sixth h1:before {
    border-left: 1px solid;
    border-right: 1px solid;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
}

.sixth h1:after {
    border-bottom: 1px solid;
    border-top: 1px solid;
    border-left: 1px solid;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
}

.sixth h1:hover:after,
.sixth h1:hover:before {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1.3);
}

:root {
    --heart-icon-color: #992c26;
    --heart-icon-size: 64px;
}

.redheart {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    /*   include an arbitrary background */
    /* background: linear-gradient(to top, #f6fbff, #d0ebff);*/
    position: absolute;
    left: 600px;
    top: -100px;
}


/* animate the hearbeat increasing its horizontal size more than its vertical */

@keyframes heartbeat {
    to {
        /*     rotate is included to maintain the rotation introduced briefly after */
        transform: scaleX(1.4) scaleY(1.3) rotate(-45deg);
    }
}

.heart-icon:hover {
    animation-duration: 0.2s;
}


/* to create the heart you can use a square div and absolute position two circles through pseudo elements
  
  position these pseudo elements at either end of the square with top/right/bottom/left properties
  */

.heart-icon {
    background-color: var(--heart-icon-color);
    height: var(--heart-icon-size);
    width: var(--heart-icon-size);
    /* rotate the square as to create the core of the heart icon */
    transform: rotate(-45deg);
    /*   call the animation on the element, which will affect the pseudo-elements as well */
    animation: heartbeat 1s alternate infinite;
}


/* on hover fasten the animation as to give the impression of a faster heartbeat */

.heart-icon:after {
    /*   by setting the color to inherit the pseudo element takes the color of the connected element */
    background-color: inherit;
    content: "";
    border-radius: 50%;
    position: absolute;
    /* the pseudo elements ought to be positioned halfway through the square; therefore they are offset by half of the chosen width/height */
    width: var(--heart-icon-size);
    height: var(--heart-icon-size);
    top: 0;
    left: calc(var(--heart-icon-size)/2);
}

.heart-icon:before {
    content: "";
    background-color: inherit;
    border-radius: 50%;
    position: absolute;
    width: var(--heart-icon-size);
    height: var(--heart-icon-size);
    top: calc(var(--heart-icon-size)/-2);
    left: 0;
}

.seventh {
    position: absolute;
    background-color: #dea025;
    top: 4280px;
    height: 200px;
    width: 1260px;
}

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/*body {
    height: 100vh;
    font-family: 'Source Sans Pro', sans-serif;
    background: #dea025;
}*/

.wrappers {
    /* position: fixed;*/
    top: 50px;
    left: 640px;
    transform: translate(-50%, -50%);
    position: absolute;
}

.social_icons,
.social_icons * {
    display: flex;
}

.social_icons {
    list-style: none;
    flex: 1;
}

.social_icons li {
    width: 80px;
    height: 80px;
    margin: 40px;
}

.social_icons a {
    text-decoration: none;
    background: #fff;
    flex: 1;
    height: 100%;
    /*justify-content: center;
    align-items: center;*/
    /*position: relative;*/
    transform: perspective(1000px) rotate(-30deg) skew(30deg) translate(0, 0);
    box-shadow: -20px 20px 10px rgba(0, 0, 0, .5);
    transition: all .35s;
}

.social_icons a:before,
.social_icons a:after {
    position: absolute;
    content: "";
    background: #ccc;
}

.social_icons a:before {
    width: 20px;
    height: 100%;
    left: -20px;
    top: 10px;
    transform: skewY(-45deg);
}

.social_icons a:after {
    width: 100%;
    height: 20px;
    left: -11px;
    bottom: -20px;
    transform: skewX(-45deg);
}

.social_icons a:hover {
    transform: perspective(1000px)
    /*rotate(-30deg)
    skew(30deg) */
    translate(25px, -25px);
    box-shadow: -30px 30px 10px rgba(0, 0, 0, .3);
}

.social_icons i {
    font-size: 2em;
    color: #222;
}

.wenzia {
    position: absolute;
    top: 130px;
    left: 374px;
    color: white;
}

.wenzib {
    position: absolute;
    top: 130px;
    left: 550px;
    color: white;
}

.wenzic {
    position: absolute;
    top: 130px;
    left: 690px;
    color: white;
}

.wenzid {
    position: absolute;
    top: 130px;
    left: 870px;
    color: white;
}